<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="300px" style="padding-top: 20px;">
        <div style="margin-left: 20px; margin-bottom: 40px;">
          <img src="@/assets/top.svg" style="width: 100%; max-height: 250px" alt="Top Logo" />
        </div>

        <el-menu :default-active="activeMenu" @select="handleMenuSelect">
          <el-menu-item index="1" class="main">
            <template slot="title"><i class="el-icon-house"></i>我的首页</template>
          </el-menu-item>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-goods"></i>产品管理</template>
              <el-menu-item index="country">国家列表</el-menu-item>
              <el-menu-item index="template">申请表模板</el-menu-item>
              <el-menu-item index="visaProduct">签证产品</el-menu-item>
              <el-menu-item index="visaMaterialRequirement">签证材料要求</el-menu-item>
              <el-menu-item index="materialTemplate">材料模板管理</el-menu-item>
          </el-submenu>
          <el-menu-item index="3">
            <template slot="title"><i class="el-icon-document"></i>订单管理</template>
          </el-menu-item>
          <el-menu-item index="4">
            <template slot="title"><i class="el-icon-user"></i>客户管理</template>
          </el-menu-item>
          <el-menu-item index="member">
            <template slot="title"><i class="el-icon-s-custom"></i>会员管理</template>
          </el-menu-item>
          <el-submenu index="6">
            <template slot="title"><i class="el-icon-s-data"></i>平台统计</template>
            <el-menu-item index="visitStats">访问统计</el-menu-item>
            <el-menu-item index="productStats">产品统计</el-menu-item>
            <el-menu-item index="orderStats">订单统计</el-menu-item>
            <el-menu-item index="customerStats">客户统计</el-menu-item>
          </el-submenu>
          <el-submenu index="7">
            <template slot="title"><i class="el-icon-s-tools"></i>平台管理</template>
            <el-menu-item index="carousel">轮播图管理</el-menu-item>
            <el-menu-item index="messageTemplate">消息模板</el-menu-item>
            <el-menu-item index="platformSettings">平台设置</el-menu-item>
          </el-submenu>
          <el-menu-item index="8">
            <template slot="title"><i class="el-icon-s-check"></i>账号管理</template>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 右侧动态内容 -->
      <el-container style="height:100%">
        <el-header style="background-color: #ffffff; display: flex; justify-content: flex-end; align-items: center; padding-right: 30px; border-bottom: 1px solid #e8e8e8;">
          <!-- 顶部工具栏 -->
          <el-dropdown @command="handleCommand">
            <div style="display: flex; align-items: center;cursor: pointer;">
              <span style="font-size: 14px;color: #606266; margin-right: 10px;">John.Doe</span>
              <el-icon><ArrowDown /></el-icon>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>

        </el-header>

        <!-- 动态路由内容 -->
        <el-main  style="padding: 20px; background-color: #ffffff;">
          <BreadCrumb class="BreadCrumb"/> <!-- 添加面包屑组件 -->
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>

</template>

<script>
import BreadCrumb from './BreadCrumb.vue'; // 引入面包屑组件
export default {
  components:{
    BreadCrumb
  },
  data() {
    return {
      activeMenu: '', // 当前选中的菜单项
    };
  },
  watch: {
    '$route'(to) {
      if (to.name === 'country') {
        this.activeMenu = 'country';
      } else if (to.name === 'home') {
        this.activeMenu = '1';
      } else if (to.name === 'template'){
        this.activeMenu = 'template';
      } else if (to.name === 'visaMaterialRequirement') {
        this.activeMenu = 'visaMaterialRequirement';
      } else if (to.name === 'materialTemplate') {
        this.activeMenu = 'materialTemplate';
      } else if (to.name === 'order') {
        this.activeMenu = '3';
      } else if (to.name === 'customer') {
        this.activeMenu = '4';
      } else if (to.name === 'customer') {
        this.activeMenu = '5';
      } else if (to.name === 'visitStats') {
        this.activeMenu = 'visitStats';
      } else if (to.name === 'productStats') {
        this.activeMenu = 'productStats';
      } else if (to.name === 'orderStats') {
        this.activeMenu = 'orderStats';
      } else if (to.name === 'customerStats') {
        this.activeMenu = 'customerStats';
      } else if (to.name === 'carousel') {
        this.activeMenu = 'carousel';
      } else if (to.name === 'messageTemplate') {
        this.activeMenu = 'messageTemplate';
      } else if (to.name === 'platformSettings') {
        this.activeMenu = 'platformSettings';
      } else if (to.name === 'account') {
        this.activeMenu = '8';
      }
    }
  },
  mounted() {
    if (this.$route.name === 'country') {
      this.activeMenu = 'country';
    } else if (this.$route.name === 'home') {
      this.activeMenu = '1';
    } else if (this.$route.name === 'template'){
      this.activeMenu = 'template';
    }
  },
  methods: {
    handleMenuSelect(index) {
      const currentRoute = this.$route.path;
      let targetRoute;

      if (index === '1') {
        targetRoute = '/main';
      } else if(index === 'country'){
        targetRoute = '/main/country'
      } else if(index === 'template'){
        targetRoute = '/main/template'
      } else if(index === 'visaMaterialRequirement'){
        targetRoute = '/main/visa-material-requirement'
      } else if(index === 'materialTemplate'){
        targetRoute = '/main/material-template'
      } else if(index === '3'){
        targetRoute = '/main/order'
      } else if(index === '4'){
        targetRoute = '/main/customer'
      } else if(index === '8'){
        targetRoute = '/main/account'
      } else if(index === 'visitStats') {
        targetRoute = '/main/visit-stats'
      } else if(index === 'productStats') {
        targetRoute = '/main/product-stats'
      } else if(index === 'orderStats') {
        targetRoute = '/main/order-stats'
      } else if(index === 'customerStats') {
        targetRoute = '/main/customer-stats'
      }else if(index === 'carousel') {
        targetRoute = '/main/carousel'
      } else if(index === 'messageTemplate') {
        targetRoute = '/main/message-template'
      } else if(index === 'platformSettings') {
        targetRoute = '/main/platform-settings'
      } else {
        targetRoute = `/main/${index}`
      }
      if (currentRoute !== targetRoute) {
        this.$router.push(targetRoute);
      }
    },
    handleCommand(command) {
      if (command === 'logout') {
        // 清除token
        localStorage.removeItem('token');
        // 显示提示信息
        this.$message.success('已退出登录');
        // 跳转到登录页面
        this.$router.push('/login');
      }
    }
  }
}
</script>
<style scoped>
.common-layout{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.BreadCrumb{
  margin-bottom: 20px;
}

/* 添加以下菜单样式 */
:deep(.el-menu) {
  border-right: none;
}

:deep(.el-menu-item),
:deep(.el-submenu__title) {
  padding: 0 20px !important;
  height: 50px;
  line-height: 50px;
}

:deep(.el-menu-item [class^="el-icon-"]),
:deep(.el-submenu__title [class^="el-icon-"]) {
  position: relative;
  margin-right: 16px;
  width: 16px;
  text-align: center;
  font-size: 18px;
  vertical-align: middle;
  left: 0;
}

:deep(.el-submenu .el-menu-item) {
  min-width: 0;
  padding-left: 52px !important;
  height: 40px;
  line-height: 40px;
}

:deep(.el-menu-item.main) {
  padding: 0 20px !important;
}

:deep(.el-menu-item span),
:deep(.el-submenu__title span) {
  vertical-align: middle;
}
</style>